<!-- 经营信息统计 -->
<template>
  <div>
    <HomeCard title="经营信息跟踪统计">
      <template v-slot:content>
        <div class="business-info-right">
          <HomeEcharts ref="EchartsRef" :echartsOption="echartsOption" />
        </div>
      </template>
    </HomeCard>
  </div>
</template>

<script type="text/javascript">
import HomeCard from "@/pages/components/homeCard/index.vue";
import HomeEcharts from "@/pages/components/homeEcharts/index.vue";
import { trackStatistics } from "@/api/home.js";

let ydata = [
  {
    name: "未洽谈",
    value: 0,
    key: 'projectNotDiscussedCount'
  },
  {
    name: "跟进中",
    value: 0,
    key: 'projectFollowUpCount'
  },
  {
    name: "已投标",
    value: 0,
    key: 'projectAlreadyDeliverTenderCount'
  },
  {
    name: "未投标",
    value: 0,
    key: 'projectUnDeliverTenderCount'
  },
  {
    name: "已中标",
    value: 0,
    key: 'projectWinTheBidCount'
  },
  {
    name: "已签约",
    value: 0,
    key: 'projectSignAContractCount'
  },
  {
    name: "其他",
    value: 0,
    key: 'otherCount'
  },
];
let color = [
  "#0052d9",
  "#1CCAD5",
  "#91E302",
  "#F8D000",
  "#FA8600",
  "#E54C7C",
  "#915EFF",
];
let xdata = [
  "未洽谈",
  "跟进中",
  "已投标",
  "未投标",
  "已中标",
  "已签约",
  "其他",
];

export default {
  name: "todo-page",
  components: {
    HomeCard,
    HomeEcharts,
  },
  data () {
    return {
      echartsOption: {
        backgroundColor: "rgba(255,255,255,1)",
        color: color,
        legend: {
          // orient: "vartical",
          x: "left",
          bottom: "0",
          data: xdata,
          itemWidth: 16,
          itemHeight: 8,
          // itemGap: 16,
          formatter: function (name) {
            return "" + name;
          },
        },
        series: [
          {
            type: "pie",
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 0, //最小的扇区角度（0 ~ 360）
            radius: ["50%", "65%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#ffffff",
                borderWidth: 6,
              },
            },
            label: {
              normal: {
                show: false,
                position: "center",
                formatter: "{span|{c}}{b|条}\n{text|{b}}",
                rich: {
                  b: {
                    color: "#999",
                    fontSize: 14,
                    align: "center",
                    verticalAlign: "middle",
                    padding: 4,
                  },
                  span: {
                    color: "#333",
                    fontSize: 24,
                    align: "center",
                    paddingTop: 20,
                  },
                  text: {
                    color: "#999",
                    fontSize: 14,
                    align: "center",
                    verticalAlign: "middle",
                    padding: 15,
                  },
                  // value: {
                  //   color: "#8693F3",
                  //   fontSize: 24,
                  //   align: "center",
                  //   verticalAlign: "middle",
                  // },
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: 24,
                },
              },
            },
            data: ydata,
          },
        ],
      },
      orgId: ''
    };
  },
  mounted () {
    this.init()
  },
  methods: {
    setOrgId (orgId = '') {
      this.orgId = orgId
      this.init()
    },
    async init () {
      const obj = await trackStatistics({ orgId: this.orgId })

      ydata.forEach(it => {
        it.value = obj[it.key]
      })

      this.$refs.EchartsRef.handleSetVisitChart();
    }
  },

};
</script>

<style lang="less" scoped>
.business-info-right {
  margin: 18px 0 0 0;
  width: 100%;
  height: 310px;
  background: #f2f2f2;
}
</style>
